<template>
    <div id="tt1">
        <div id="tt2">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="登录账号：" prop="AccountName">
                    <el-input v-model="ruleForm.AccountName" />
                </el-form-item>
                <el-form-item label="登录密码：" prop="AccountPass">
                    <el-input v-model="ruleForm.AccountPass" type="password" />
                </el-form-item>
               

                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import router from '@/router';

interface RuleForm {
    AccountName: string
    AccountPass: string
   
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    AccountName: '',
    AccountPass: '',
  
})

const rules = reactive<FormRules<RuleForm>>({
    AccountName: [
        { required: true, message: '登录账号不能为空！', trigger: 'blur' },
    ],
    AccountPass: [
        {
            required: true,
            message: '登录密码不能为空！',
            trigger: 'blur',
        },
    ],
   
})



const submitForm = async (formEl: FormInstance | undefined) => {
    
            axios.get('http://localhost:5071/api/Account/Login', {
                params: {
                    AccountName: ruleForm.AccountName,
                    AccountPass: ruleForm.AccountPass,
                }
            }).then(res => {
                if (res.data.code == 201) {
                    // 将Token信息保存到sessionStorage
                    sessionStorage.setItem('token', res.data.data.AccountPass);
                    // 添加JWT token信息
                    axios.defaults.headers.common["Authorization"] = res.data.data.AccountPass;
                    ElMessage.success('登录成功！');
                     // 登录成功，写JWT的 token到本地
        window.localStorage.setItem("token", res.data.data);
        // 数据提交后端要加入新的Token值
        axios.defaults.headers.common["Authorization"] =
            "Bearer " + res.data.data;
                    router.push('/main');
                } else {
                    ElMessage.error(res.data.msg);
                }
            }).catch(err => {
                console.log(err);
            });

        } 
        


const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

// 钩子函数
onMounted(() => {

})

</script>
<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

#tt1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
}

#tt2 {
    width: 500px;
    height: 250px;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 50px 50px;
}
</style>